<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item label="当前剩余发送量">
          <span>{{ count }}条</span>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="sendLogic" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column prop="nickname" label="用户昵称" width="300" >
      </el-table-column>
      <el-table-column prop="template_id" label="微信模版Id" width="430" sortable>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="220" >
      </el-table-column>
      <el-table-column prop="created_time" label="创建时间" width="300" sortable>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import {messageCount, getSendLogListPage} from '../../api/api';

    export default {
        data() {
            return {
                count: 0,
                sendLogic: [],
                total: 0,
                page: 1,
                listLoading: false,
            }
        },
        mounted(){
            clearInterval(this.timer);
            clearInterval(this.timer2);
            this.getSendLogList();
            this.timer = setInterval(this.getMessageCount, 1000);
            this.timer2 = setInterval(this.getSendLogList, 1000);
        },
        destroyed(){
            clearInterval(this.timer)
            clearInterval(this.timer2)
        },
        methods: {
          handleCurrentChange(val) {
            this.page = val;
            this.getSendLogList();
          },
          getMessageCount: function () {
              messageCount().then((res) => {
                  this.count = res.data.count;
                  console.log(res.data);
              });
          },
          getSendLogList() {
            let para = {
              page: this.page,
            };
            this.listLoading = true;
            getSendLogListPage(para).then((res) => {
              console.log(res);
              let { sendLogic, templates, users } = res.data;

              this.total = res.data.total;
              for (let i in sendLogic) {
                sendLogic[i]['nickname'] = users[sendLogic[i]['user_id']]['nickname'];
                sendLogic[i]['template_id'] = templates[sendLogic[i]['template_id']]['template_id'];
                sendLogic[i]['status'] = (sendLogic[i]['status'] == "succeed") ? '成功' : '等待';
              }
              this.sendLogic = sendLogic;
              this.listLoading = false;
            });
          },
        }
    }

</script>